<template>
  <div ref="chart04" class="chart-1"></div>
</template>
<script>
import axios from 'axios';
import * as echarts from 'echarts';
export default {
  data() {
    return {
      myEcharts: null,
      option: {
        title:{
          text:"商家分布",
          textStyle: {
            color: '#fff',
            fontSize: 20
          },
        },
        geo: {
          type: 'map',
          map: 'china',
          zoom: 1.5,
          center: [104.114129, 37.550339],
          itemStyle: {
            normal: {
              areaColor: '#0C4D8F',
              borderColor: '#70EEEF'
            },
          },
          roam: true,

        },
        tooltip: {},
        legend: {
          textStyle: {
            color: '#fff'
          },
          orient: 'vertical',
          left: 'left',
          bottom: 20,
        },
        series: []
      }
    };
  },
  methods: {
    async getMapData() {
      let { data } = await axios.get("https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json")
      console.log(data);
      echarts.registerMap('china', data);
      //点的数据
      let rets = await axios.get("http://124.223.9.151:9012/api/map.json")
      console.log(rets, 'ret');
      rets.data.forEach(item => {
        this.option.series.push({
          type: 'effectScatter',
          coordinateSystem: 'geo',
          name: item.name,
          data:item.children,
        })
      })


      this.myEcharts.setOption(this.option);

    }

  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    this.myEcharts = echarts.init(this.$refs['chart04']);
    //关联
    // this.myEcharts.setOption(this.option);
    this.getMapData()
  }
}
</script>

<style scoped>
.chart-1 {
  height: 100%;
}
</style>